<script lang="ts" setup>
import { useXtxRecommand } from '@/composables/useXtxRecommand';

defineProps<{ id: string }>();

const { xtxRecommandRef, xtxRecommandLoadMore } = useXtxRecommand();
</script>

<template>
  <scroll-view class="viewport" scroll-y @scrolltolower="xtxRecommandLoadMore">
    <!-- 订单状态 -->
    <view class="overview">
      <view class="status icon-checked">支付成功</view>
      <view class="buttons">
        <navigator class="button navigator" hover-class="none" url="/pages/index/index" open-type="switchTab">
          返回首页
        </navigator>
        <navigator class="button navigator" hover-class="none" :url="`/pagesOrder/detail/detail?id=${id}`"
          open-type="redirect">
          查看订单
        </navigator>
      </view>
    </view>
    <XtxRecommand ref="xtxRecommandRef" />
  </scroll-view>
</template>

<style lang="scss">
.viewport {
  width: 100vw;
  height: 100vh;
  background-color: #f7f7f8;
}

.overview {
  line-height: 1;
  padding: 50rpx 0;
  color: #fff;
  background-color: #27ba9b;

  .status {
    font-size: 36rpx;
    font-weight: 500;
    text-align: center;
  }

  .status::before {
    display: block;
    font-size: 110rpx;
    margin-bottom: 20rpx;
  }

  .buttons {
    height: 60rpx;
    line-height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;
  }

  .button {
    text-align: center;
    margin: 0 10rpx;
    font-size: 28rpx;
    color: #fff;
    width: 200rpx;
    border-radius: 64rpx;
    border: 1rpx solid #fff;
  }
}
</style>